<template>
    <div class="container" v-if="pageflag">
        <div class="contents">
            <!-- 综合统计 -->
            <div class="contetn_left">
                <div class="contetn_left_title">{{ museumName }}</div>
                <!--                <LeftTop :child-message="provinceStatData" v-if="provinceStatData"/>-->
<!--                <CenterMap class="contetn_center_top" />-->
                <MuseumsList :userId="userId" v-if="userId" />
            </div>
            <!-- 地图 -->
            <!--            <div class="contetn_center">-->
            <!--                <CenterMap class="contetn_center_top" />-->
            <!--            </div>-->
            <!-- 排行榜 -->
            <div class="contetn_right">
                <div class="contetn_left-bottom contetn_lr-item" title="年客流数据">
                    <div class="contetn_right_title">年客流数据</div>
                    <!--                    <RightTop class="mrt" :child-message="provinceStatData.rankingData" v-if="provinceStatData" />-->
                    <CenterBottomYear />
                </div>
                <div class="contetn_left-bottom contetn_lr-item" title="月客流数据">
                    <div class="contetn_right_title2">月客流数据</div>
                    <!--                    <RightTop class="mrt" :child-message="provinceStatData.rankingData" v-if="provinceStatData" />-->
                    <CenterBottomMonth :child-message="calendarData" />
                </div>
            </div>
        </div>
        <!-- 日客流数据 -->
        <div class="footer">
            <div class="contetn_center-bottom">
                <div class="contetn_left_title">日客流数据</div>
                <CenterBottom />
            </div>
        </div>
    </div>
    <Reacquire v-else @onclick="getData" line-height="1000px">
        重新获取
    </Reacquire>
</template>

<script>
// import LeftTop from './left-top.vue'
// import CenterMap from "./center-map.vue";
import CenterBottom from "./center-bottom.vue";
import CenterBottomYear from "./center-bottom-year.vue";
import CenterBottomMonth from "./center-bottom-month.vue";
import MuseumsList from "./museumsList.vue";
// import RightTop from "./right-top.vue";
import {currentGET} from "api";
import {Message} from "element-ui";
import RightTop from "@/views/revolutionaryMemorial/right-top.vue";
import {mapState} from "vuex";
import Astrict from '@/utils/astrict'

export default {
    components: {
        RightTop,
        // LeftTop,
        // CenterMap,
        // RightTop,
        MuseumsList,
        CenterBottom,
        CenterBottomYear,
        CenterBottomMonth,
    },
    data() {
        return {
            loading: true,
            pageflag: true,
            provinceStatData: null,
            calendarData: [],
            userId: undefined,
            orgId: undefined,
        };
    },
    watch: {
        $route() {
            this.goHome();
        }
    },
    computed: {
        ...mapState('museumInformation', [
            'museumName',
            'currentPage',
            'urbanAreaName',
            'urbancityId',
        ])
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() {
        const name = this.$route.query.name
        this.orgId = _.clone(this.$route.query.cityId);
        this.$store.commit('museumInformation/SET_MuseumName', name);
        this.goHome();
        this.getData();
        Astrict();
    },

    mounted() {},
    methods: {
        async getData() {
            this.loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            // if (this.$route.query.cityId != 9001) {
            //     const cityId = this.$route.query.cityId
            //     currentGET("museumStat", {orgId: cityId})
            //         .then((res) => {
            //             if (res.success) {
            //                 this.museumStatData = res.data;
            //                 this.userId = this.museumStatData.userId || true;
            //                 console.log(JSON.parse(JSON.stringify(this.museumStatData)), "this.museumStatData");
            //                 this.$store.commit('museumInformation/SET_UrbanAreaName', this.museumStatData.cityName);
            //                 this.$store.commit('museumInformation/SET_UrbanCityId', this.museumStatData.cityId);
            //             } else {
            //                 // this.pageflag = false;
            //                 this.museumStatData = [];
            //                 // this.$Message({
            //                 //     text: res.msg,
            //                 //     type: "warning",
            //                 // });
            //             }
            //         })
            //         .catch((e) => {
            //             // this.pageflag = false;
            //             console.log(e, "error");
            //         })
            //         .finally(() => {
            //             // this.loading.close();
            //         });
            // }else{
            //     this.userId = true;
            // }

            let id = this.$route.query.id;
            let cityId = this.$route.query.cityId;
            // let cityId = this.$route.query.cityId;
            currentGET("getMuseumList", {cityId: id})
                .then((res) => {
                    if (res.success) {
                        this.museumList = res.data;
                        console.log(this.museumList, "this.museumList");
                        let museumListItem = this.museumList.find(item => item.orgId === cityId);
                        this.userId = museumListItem.userId || true;
                        this.$store.commit('museumInformation/SET_UrbanAreaName', museumListItem.cityName);
                        this.$store.commit('museumInformation/SET_UrbanCityId', museumListItem.cityId);
                        console.log(museumListItem, "museumListItem");
                        console.log(this.userId, "this.userId");
                    } else {

                    }
                });


            const currentMonth = this.getCurrentMonth();
            this.getProvCalendarYear(currentMonth);

            this.loading.close();
        },
        // 获取月客流数据
        async getProvCalendarYear(currentMonth) {
            console.log(currentMonth, "currentMonth");
            const res = await currentGET("getMuseumCalendarYear", {yearMonth: currentMonth, orgId: this.orgId});
            if (res.success) {
                if (res.data.length === 0) {
                    Message({
                        duration: 2000,
                        showClose: true,
                        message: "暂无数据",
                        type: 'warning'
                    });
                }
                this.calendarData = res.data;
                this.calendarData.forEach(item => {
                    item.allocationSum = 1;
                })
                console.log(JSON.parse(JSON.stringify(this.calendarData)), "this.calendarData");
            } else {
                this.pageflag = false;
                this.calendarData = [];
            }
        },
        getProvDay() {
            currentGET("getProvDay", {})
                .then((res) => {
                    if (res.success) {
                        this.ProvDayData = res.data;
                        console.log(this.ProvDayData, 'this.ProvDayData');

                        let hours = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];

                        let result = hours.map((hour) => {
                            let obj = this.ProvDayData.find(function(item) {
                                return item.hour === hour;
                            });

                            if (obj) {
                                return obj.value;
                            } else {
                                return 0;
                            }
                        });

                        console.log(result, "result");

                        this.options.series[0].data = result
                        this.options2.series[0].data = result
                    } else {
                        this.pageflag = false;
                        // this.$Message({
                        //     text: res.msg,
                        //     type: "warning",
                        // });
                    }
                })
                .catch((e) => {
                    // this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                });
        },
        // 获取当前月份
        getCurrentMonth() {
            const currentDate = new Date(); // 获取当前日期对象
            const year = currentDate.getFullYear(); // 获取当前年份
            const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份从 0 开始，所以要加 1）

            const formattedMonth = `${year}-${String(month).padStart(2, '0')}`; // 格式化月份为 "YYYY-MM"

            return formattedMonth;
        },
        // 博物馆名称为空时跳转回首页
        goHome() {
            console.log(this.$route.query, "this.$route.query");
            // if (this.$route.query.name == undefined) {
            //     this.$router.push({
            //         path: '/museums',
            //     })
            // }
        }
    },
};
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  //justify-content: space-between;
  min-height: calc(100% - 60px);
  //margin-top: 16px;
}

.contetn_left_title {
  width: 446px;
  height: 38px;
  padding-left: 36px;
  line-height: 38px;
  font-size: 18px;
  color: #fcfbff;
  //background-image: url("../../assets/img/left-title.png");
  background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/left-title.webp");
  background-size: cover;
  background-position: 25%;
}

.contetn_right_title {
  width: 446px;
  height: 38px;
  padding-right: 36px;
  line-height: 38px;
  font-size: 18px;
  text-align: right;
  color: #fcfbff;
  //background-image: url("../../assets/img/right-title.png");
    background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/right-title.webp");
  background-size: cover;
    background-position: 100%;
}

.contetn_right_title2 {
  width: 446px;
  height: 38px;
  margin-top: 10px;
  padding-right: 36px;
  line-height: 38px;
  font-size: 18px;
  text-align: right;
  color: #fcfbff;
  //background-image: url("../../assets/img/right-title.png");
    background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/right-title.webp");
  background-size: cover;
    background-position: 100%;
}

// 内容
.contents {
  .contetn_left,
  .contetn_right {
    width: 945px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    flex: 1;
    height: 100%;
    //width: 720px;
  }
  //左右两侧 三个块
  .contetn_lr-item {
    //height: 710px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    //justify-content: space-around;
    position: relative;
  }

  .contetn_left-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .mrt{
      margin-right: 12px;
    }
  }
}

.footer{
  .contetn_center-bottom {
    height: 340px;
  }
}


@keyframes rotating {
  0% {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);
  }
  50% {
    -webkit-transform: rotate(180deg) scale(1.1);
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    -webkit-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
}
</style>
